<template>
  <div>
    <h1>商品列表</h1>
    <div v-for="(item, index) in title" :key="index" @click="tab(index)">
      {{ item }}
    </div>
    <ul id="box">
      <li v-for="(item, index) in filter" :key="index">
        <img :src="item.img" />
        <p>{{ item.name }}</p>
        <p>{{ item.price }}</p>
        <button @click="add(item.id)">添加到购物车</button>
      </li>
    </ul>
    <button @click="gouwuche()">购物车</button>
    <ul v-show="xianshi">
      <li v-for="(item, index) in arr2" :key="index">
        <input type="checkbox" v-model="item.is" />
        <img :src="item.img" />
        <p>{{ item.name }}</p>
        <p>{{ item.price }}</p>
        <button @click="jia(item.id)">+</button>
        <p>{{ item.num }}</p>
        <button @click="jian(item.id)">-</button>
      </li>
      <input type="checkbox" v-model="quanxuan" @change="xuan()">全选
      <p>{{fn}}</p>
      <button @click="jiesuan()">去结算</button>
      <JiSuan v-show="xianshi2"></JiSuan>
    </ul>
  </div>
</template>
<script>
import JiSuan from './JiSuan.vue';
export default {
  components:{JiSuan},
  data() {
    return {
      xianshi2:false,
      quanxuan:null,
      xianshi: false,
      index: 0,
      title: ["热门推荐", "新品推荐", "清凉一夏", "呵护肠胃"],
      arr: [
        {
          pid: 0,
          id: 1,
          name: "感冒灵",
          price: 12,
          img: "",
        },
        {
          pid: 0,
          id: 2,
          name: "莲花清瘟胶囊",
          price: 22,
          img: "",
        },
        {
          pid: 1,
          id: 3,
          name: "蛋白粉",
          price: 100,
          img: "",
        },
        {
          pid: 1,
          id: 4,
          name: "维生素",
          price: 88,
          img: "",
        },
        {
          pid: 2,
          id: 5,
          name: "藿香正气水",
          price: 5,
          img: "",
        },
        {
          pid: 2,
          id: 6,
          name: "风油精",
          price: 2,
          img: "",
        },
        {
          pid: 3,
          id: 7,
          name: "健胃消食片",
          price: 10,
          img: "",
        },
        {
          pid: 3,
          id: 8,
          name: "三九胃泰颗粒",
          price: 30,
          img: "",
        },
      ],
      arr2: [],
    };
  },
  methods: {
    // tab切换
    tab(index) {
      this.index = index;
    },
    // 添加到购物车
    add(id) {
      var a = this.arr.find((item) => item.id == id);
      var b = this.arr2.find((item) => item.id == id);
      if (b) {
        b.num++;
      } else {
        this.arr2.push({
          id: a.id,
          name: a.name,
          price: a.price,
          img: a.img,
          is: false,
          num: 1,
        });
      }
    },
    // 点击购物车显现
    gouwuche() {
      this.xianshi = true;
    },
    // 加
    jia(id) {
      var a = this.arr2.find((item) => item.id == id);
      a.num++;
    },
    // 减
    jian(id) {
      var a = this.arr2.find((item) => item.id == id);
      if (a.num > 1) {
        a.num--;
      } else {
        alert("商品数量不能少于1个");
      }
    },
    // 全选反选
   xuan(){
    this.arr2.forEach(item =>{
      item.is = this.quanxuan
    })
   },
  // 结算跳转页面
  jiesuan(){
    this.arr2.forEach(item =>{
      if(item.is){
        localStorage.setItem("name",item.name)
        localStorage.setItem("price",item.price)
        localStorage.setItem("img",item.img)
        localStorage.setItem("num",item.num)
        this.xianshi2 = true
      }
    })
  },
  },
  computed: {
    // 筛选pid
    filter() {
      var a = this.arr.filter((item) => item.pid == this.index);
      return a;
    },
  //  计算选中总价
   fn(){
    var a = 0
    this.arr2.forEach(item =>{
       if(item.is){
          a += item.num * item.price
       }
    })
    return a
   }
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
#box {
  display: flex;
  width: 800px;
  margin: auto;
  text-align: center;
}
#box > li {
  width: 200px;
  height: 100px;
  background-color: aqua;
  margin-right: 15px;
}
</style>
